<template>
  <el-row>

    <el-col
        v-for="book in books"
        :key="book"
        :span="4"
    >
      <el-tooltip
          class="item"
          effect="dark"
          :content="book.abs"
          placement="right"
      >
        <el-card :body-style="{ padding: '0px' }" style="margin: 20px;">
          <img
              :src="book.cover"
              class="image"
          />
          <div style="padding: 14px">
            <span class="title">{{ book.title }}</span>
            <div class="bottom">
              <time class="time">{{ book.author }}</time>
            </div>
          </div>
        </el-card>
      </el-tooltip>
     </el-col>
  </el-row>
  <el-pagination
      v-model:currentPage="currentPage3"
      :page-size="size"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
import { ref } from 'vue'
export default {
  name: "Book",
  data() {
    return {
      books: [],
      currentPage3: ref(1),
      size: 12,
      page: 1,
      category: 100,
      total: 0,
    }
  },
  mounted() {
    this.loadBooks()
  },
  methods: {
    loadBooks() {
      this.currentPage3 = ref(this.page)
      let _this = this
      this.$axios.get("book/page", {params: {category: this.category, page: this.page, size: this.size}})
      .then(success => {
        if (success.data.code === 200) {
          _this.total = success.data.data.total
          _this.books = success.data.data.list
          _this.books.forEach(book => book.cover = "http://localhost:8085/api/image/load?url=" + book.cover)
          console.log(_this.books);
        }
      }).catch(fail => {
        console.log(fail);
      })
    },
    handleCurrentChange(page) {
      this.page = page
      this.loadBooks()
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*不允许换行*/
  white-space: nowrap;
  /*超出的部分隐藏*/
  overflow: hidden;
  /*多余的文字变成 “...”*/
  text-overflow: ellipsis;
}

.image {
  width: 100%;
  display: block;
}
.title {
  /*不允许换行*/
  white-space: nowrap;
  /*超出的部分隐藏*/
  overflow: hidden;
  /*多余的文字变成 “...”*/
  text-overflow: ellipsis;
}
</style>